import React, { useState, useEffect } from 'react'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
type Props = {}

function Refund({ }: Props) {
    const navigate = useNavigate()
    const [data, setList] = useState([]);
    const addressLists = () => {
        axios.get('http://localhost:3002/piaoju').then((res) => {
            setList(res.data);
        });
    };
    useEffect(() => {
        addressLists();
    }, []);
    return (
        <div>
            {
                data && data.map((item: any, index) => {
                    return item.state != '购票成功' && item.state != '待支付' ? <div key={index} className='goods'>
                        <div className='goood' onClick={
                            () => navigate("/ding/" + item.id, { state: item })
                        }>
                            <div className='goodstop'>
                                <b style={{ fontSize: "15px" }}>{item.city}—{item.citys} {item.train}</b>
                                <span style={{ fontSize: "20px", color: "rgb(255,131,0)" }}>￥{item.price}</span>
                            </div>
                            <div className='goodsmain'>
                                <p><span style={{ float: 'left', marginRight: "10px" }}>{item.railway}车厢{item.wagon}号</span><span>{item.name}</span></p>
                                <p style={{ color: item.state === '购票成功' ? "#1d953f" : '#000' && item.state === '待支付' ? 'red' : "#000" }}>{item.state}</p>
                            </div>
                            <div className='goodsbottom'>
                                <span>{item.time}</span>
                            </div>
                        </div>
                        <button className='btns'>删除订单</button>
                    </div > : ''
                })
            }
        </div >
    )
}

export default Refund